<template>
  <div class="list_content">
    <!-- <van-card
      v-for="(item, index) in list"
      :key="index"
      :num="item.number"
      :price="item.price"
      :desc="item.desc"
      :title="item.title"
      thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag plain type="danger">标签</van-tag>
        <van-tag plain type="danger">标签</van-tag>
      </template>
      <template #footer>
        <van-button size="mini">按钮</van-button>
        <van-button size="mini">按钮</van-button>
      </template>
    </van-card>
    <van-button @click="addItem" class="btn" type="primary">添加商品</van-button>
    <popup @addItem="receiveAddItem"></popup> -->
    <input type="file" @change="onChange" />
  </div>
</template>

<script>
import { provide, ref } from "vue";
// import popup from './popup.vue'
var COS = require("cos-js-sdk-v5");
export default {
  components: {
    // popup
  },
  setup() {
    const list = ref([]);
    const showPopup = ref(false);

    provide("showPopup", showPopup);
    return {
      list,
      showPopup,
    };
  },
  methods: {
    addItem() {
      this.showPopup = true;
    },
    receiveAddItem(item) {
      this.list.push(item);
    },
    onChange(file) {
      console.log(file.target.files[0]);

      var cos = new COS({
        SecretId: "",
        SecretKey: "",
      });
      cos.putBucketCors(
        {
          Bucket: "" /* 必须 */,
          Region: "" /* 存储桶所在地域，必须字段 */,
          CORSRules: [
            {
              AllowedOrigin: ["*"],
              AllowedMethod: ["GET", "POST", "PUT", "DELETE", "HEAD"],
              AllowedHeader: ["*"],
              ExposeHeader: [
                "ETag",
                "x-cos-acl",
                "x-cos-version-id",
                "x-cos-delete-marker",
                "x-cos-server-side-encryption",
              ],
              MaxAgeSeconds: "5",
            },
          ],
        },
        function (err, data) {
          console.log(err || data);
        }
      );
    },
  },
};
</script>

<style scoped>
.list_content {
  display: flex;
  flex-direction: column;
}
.btn {
  position: fixed;
  width: 100%;
  bottom: 0;
}
</style>